<template>
  <div class="crud__container">
    <div class="crud__container__header">
      <slot name="header"></slot>
    </div>
    <div class="crud__container__body">
      <slot></slot>
    </div>
    <div class="crud__container__footer">
      <slot name="footer"></slot>
    </div>
    <edit-dialog :title="dialogTitle" :show.sync="show" :width="dialogWidth">
      <slot name="dialogBody"></slot>
      <template slot="ok">
        <primary-button @click.native="doCreate" v-if="editInfo.editType == 'create'">确定</primary-button>
        <primary-button @click.native="doUpdate" v-if="editInfo.editType == 'update'">确定</primary-button>
      </template>
    </edit-dialog>
  </div>
</template>

<script>
import EditDialog from '@/components/EditDialog'
import {PrimaryButton} from "@/components/Form"

export default {
  props: {
    editInfo: {
      default: () => {
      }
    },
    dialogWidth: {
      default: ''
    }
  },
  components: {EditDialog, PrimaryButton},
  data() {
    return {}
  },
  computed: {
    dialogTitle() {
      return this.editInfo.editMap[this.editInfo.editType]
    },
    show: {
      get() {
        return this.editInfo.editFlag
      },
      set(val) {
        this.$emit('update:editInfo', {...this.editInfo, editFlag: val})
      }
    }
  },
  watch: {},
  methods: {
    doCreate() {
      this.$emit('doCreate')
    },
    doUpdate() {
      this.$emit('doUpdate')
    }
  }
}
</script>

<style lang="scss">
.crud__container {
  height: 100%;
  display: grid;
  grid-template-rows: 60px auto 70px;
  &__body {
    height: 100%;
    overflow-y: hidden;
  }
  &__footer {
    text-align: center;
    padding:20px;
  }
}
</style>
